<template>
  <div class="news_container">
    <div
      class="news_banner"
      v-if="useWidth.width.value > 750"
      :style="{
        background: 'url(' + new_background.imageUrl + ')  no-repeat center',
      }"
    >
      <div
        class="news_banner_title"
        :style="{
          width: settingStore.publicWidth,
        }"
      >
<!--        新闻公告-->
      </div>
    </div>
    <div
      class="news_banner"
      v-if="useWidth.width.value <= 750"
      :style="{
        background: 'url(' + new_background.imagePhone + ')  no-repeat center',
      }"
    >
      <div
        class="news_banner_title"
        :style="{
          width: settingStore.publicWidth,
        }"
      >
<!--        新闻公告-->
      </div>
    </div>
    <div class="news_list">
      <div class="news_list_tabs_box">
        <div
          class="news_list_tabs"
          :style="{
            width: settingStore.publicWidth,
          }"
        >
          <div
            :class="
              newsTabsActive === index
                ? 'news_list_tabs_item news_list_tabs_item_active'
                : 'news_list_tabs_item'
            "
            v-for="(item, index) in newsTabs"
            :key="index + 'newsTabs'"
            @click="handNewsTabsClick(index)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div
        class="news_list_content"
        :style="{
          width: settingStore.publicWidth,
        }"
      >
        <div class="news_list_content_breadcrumb">
          <t-breadcrumb>
            <t-breadcrumb-item to="/dashboard/base"> 首页 </t-breadcrumb-item>
            <t-breadcrumb-item>新闻公告</t-breadcrumb-item>
            <t-breadcrumb-item>{{
              newsTabs[newsTabsActive].name
            }}</t-breadcrumb-item>
          </t-breadcrumb>
        </div>
        <div class="news_list_content_title">
          <h2>
            {{ newsTabs[newsTabsActive].name }}
          </h2>
          <h4>{{ newsTabs[newsTabsActive].en }}</h4>
          <img src="@/assets/news-fh.png" alt="" />
        </div>
        <div class="news_list_item" v-if="newsTabsActive === 0">
          <div class="news_list_item_content">
            <div
              class="box_content_news_content_item_content_item"
              v-for="(item, index) in newsData"
              :key="index + 'news'"
            >
              <div class="news_item_img">
                <img :src="item.image" alt="" />
              </div>
              <div class="news_item_info">
                <div class="news_item_info_title" @click="handNewsDetail(item)">
                  {{ item.title }}
                </div>
                <p class="news_item_info_content">{{ item.summary }}</p>
                <div class="news_item_info_time">
                  <div class="news_item_info_time_icon">
                    <TimeIcon />
                    <span> {{ item.publishTime }}</span>
                  </div>
                  <!-- <a href="">查看更多></a> -->
                  <t-link @click="handNewsDetail(item)"> 查看更多> </t-link>
                </div>
              </div>
            </div>
            <t-pagination
              class="news_list_pagination"
              v-model="page.pageNum"
              v-model:pageSize="page.pageSize"
              :total="page.total"
              :showPageSize="false"
              :totalContent="false"
              :max-page-btn="6"
              :size="'medium'"
              @change="onPageChange"
            />
          </div>
        </div>
        <div class="news_list_item" v-if="newsTabsActive === 1">
          <div class="news_list_item_content">
            <div
              class="box_content_news_content_item_content_item"
              v-for="(item, index) in newsDataTwo"
              :key="index + 'newsTwo'"
            >
              <div class="news_item_img">
                <img :src="item.image" alt="" />
              </div>
              <div class="news_item_info">
                <div class="news_item_info_title" @click="handNewsDetail(item)">
                  {{ item.title }}
                </div>
                <p class="news_item_info_content">{{ item.summary }}</p>
                <div class="news_item_info_time">
                  <div class="news_item_info_time_icon">
                    <TimeIcon />
                    <span> {{ item.publishTime }}</span>
                  </div>
                  <!-- <a href="">查看更多></a> -->
                  <t-link @click="handNewsDetail(item)"> 查看更多> </t-link>
                </div>
              </div>
            </div>
            <t-pagination
              class="news_list_pagination"
              v-model="pageNotice.pageNum"
              v-model:pageSize="pageNotice.pageSize"
              :total="pageNotice.total"
              :showPageSize="false"
              :totalContent="false"
              :maxPageBtn="5"
              :size="'medium'"
              @change="onPageChangeTwo"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "ListBase",
};
</script>

<script setup lang="ts">
import { TimeIcon } from "tdesign-icons-vue-next";
import { onMounted, ref } from "vue";
import { useRouter, useRoute } from "vue-router";

import { pagination, paginationTwo } from "./constants";
import { useSettingStore } from "@/store";
import { contentConfig, newsList, backImage } from "@/api";
import { useWindowResize } from "@/utils/useWindowResize";
const useWidth = useWindowResize();
const route = useRoute();
const router = useRouter();
const settingStore = useSettingStore();

const newsTabsActive = ref(0);
const newsTabs = ref([
  {
    name: "新闻资讯",
    value: 1,
    en: "News and Information",
  },
  {
    name: "通知公告",
    value: 2,
    en: "notice and Information",
  },
]);
const newsData = ref([
  {
    title: "北京市政府党组成员隋振江一行莅临BGI参观调研",
    summary:
      "充分肯定 BGI 在石墨烯领域的创新贡献，强调实现高水平科技自立自强是推动高质量发展的必由之路。他指出，市政府将进一步优化政策环境，加大关键核心技术攻关支持力度，深化政研协同机制，优化资源配置效率，及时解决企业发展中的难点问题，助力 BGI 打造全球石墨烯...",
    publishTime: "2025-04-24",
    image: new URL("@/assets/news-bg.png", import.meta.url).href,
  },
]);
const newsDataTwo = ref([
  {
    title: "北京市政府党组成员隋振江一行莅临BGI参观调研",
    summary:
      "充分肯定 BGI 在石墨烯领域的创新贡献，强调实现高水平科技自立自强是推动高质量发展的必由之路。他指出，市政府将进一步优化政策环境，加大关键核心技术攻关支持力度，深化政研协同机制，优化资源配置效率，及时解决企业发展中的难点问题，助力 BGI 打造全球石墨烯...",
    publishTime: "2025-04-24",
    image: new URL("@/assets/news-bg.png", import.meta.url).href,
  },
]);

onMounted(() => {
  const active =
    typeof route.query.active === "string"
      ? parseInt(route.query.active, 10)
      : 0;
  newsTabsActive.value = isNaN(active) ? 0 : active;
  getList();
  getListNotice();
});
const handNewsTabsClick = (index: number) => {
  newsTabsActive.value = index;
};
const page = ref({
  pageNum: 1,
  pageSize: 10,
  total: 0,
  type: "0",
});
const getList = () => {
  newsList(page.value).then((e) => {
    newsData.value = e.rows;
    page.value.total = e.total;
  });
};
// 添加缺失的方法 ↓↓↓
const onPageChange = () => {
  // page.value.pageNum = pageNum;
  getList();
};
const pageNotice = ref({
  pageNum: 1,
  pageSize: 10,
  total: 0,
  type: "1",
});
const getListNotice = () => {
  newsList(pageNotice.value).then((e) => {
    newsDataTwo.value = e.rows; //
    pageNotice.value.total = e.total; //
  });
};
const onPageChangeTwo = () => {
  getListNotice();
};
const handNewsDetail = (item: any) => {
  router.push({
    path: "/newsDetail",
    query: { active: newsTabsActive.value, id: item.id },
  });
};
// 背景图片
const new_background = ref({ imagePhone: null, imageUrl: null });
backImage("new_background").then((e) => {
  new_background.value = e;
});
</script>

<style lang="less" scoped>
.news_container {
  width: 100%;
  .news_banner {
    width: 100%;
    height: 200px;
    background: url("@/assets/news-banner.png") no-repeat center;
    background-size: 100% 100%!;
    display: flex;
    align-items: center;
    justify-content: center;
    .news_banner_title {
      font-family: Microsoft YaHei;
      font-weight: bold;
      font-size: 30px;
      color: #ffffff;
    }
  }
  .news_list {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .news_list_tabs_box {
      width: 100%;
      height: 100px;
      background: rgba(173, 33, 33, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      .news_list_tabs {
        height: 100%;
        display: flex;
        align-items: center;
        .news_list_tabs_item {
          font-family: Microsoft YaHei;
          font-weight: bold;
          font-size: 20px;
          margin-right: 120px;
          cursor: pointer;
        }
        .news_list_tabs_item_active {
          color: #333333;
          color: #ad2121;
        }
      }
    }
    .news_list_content {
      padding: 10px;
      .news_list_content_breadcrumb {
        display: flex;
        justify-content: flex-end;
      }
      .news_list_content_title {
        display: flex;
        align-items: center;
        font-family: Microsoft YaHei;
        margin-bottom: 45px;
        h2 {
          font-weight: 400;
          font-size: 30px;
          color: #333333;
        }
        h4 {
          font-weight: 300;
          font-size: 14px;
          color: #666666;
          margin: 0 10px;
          text-transform: uppercase;
        }
        /* img {
          width: 14px;
          height: 14px;
        } */
      }
      .news_list_item {
        width: 100%;
        .news_list_item_content {
          width: 100%;
          .box_content_news_content_item_content_item {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;
            height: 190px;
            margin-bottom: 48px;
          }
          .news_item_img {
            width: 285px;
            height: 100%;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .news_item_info {
            width: calc(100% - 305px);
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding-bottom: 36px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            font-family: Microsoft YaHei;
            margin-left: 20px;
            .news_item_info_title {
              font-weight: 400;
              font-size: 20px;
              color: #333333;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              cursor: pointer;
            }
            .news_item_info_content {
              font-weight: 400;
              font-size: 14px;
              color: #999999;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }
            .news_item_info_time {
              display: flex;
              align-items: center;
              justify-content: space-between;
              font-weight: 400;
              font-size: 16px;
              color: #666666;
              .news_item_info_time_icon {
                display: flex;
                align-items: center;
                span {
                  margin-left: 8px;
                }
              }
              a {
                font-weight: 400;
                font-size: 16px;
                color: #ad2121;
              }
            }
          }
          .news_list_pagination {
            justify-content: center;
            margin-bottom: 48px;
            :deep(.t-pagination__number.t-is-pageNum) {
              background-color: #ad2121;
              border-color: #ad2121;
            }
          }
        }
      }
    }
  }
}
@media screen and (max-width: 750px) {
  .news_container {
    .news_banner {
      height: 120px;
      .news_banner_title {
        font-size: 20px;
        padding-left: 30px;
      }
    }
    .news_list {
      .news_list_tabs_box {
        height: 60px;
        .news_list_tabs {
          width: 100% !important;
          padding: 10px;
          .news_list_tabs_item {
            font-size: 16px;
            margin-right: 30px;
            &:last-child {
              margin-right: 0;
            }
          }
        }
      }
      .news_list_content {
        width: 100% !important;
        .news_list_content_breadcrumb {
          justify-content: flex-start;
        }
        .news_list_content_title {
          margin-top: 20px;
          margin-bottom: 20px;
          justify-content: center;
          h2 {
            font-size: 20px;
          }
          h4 {
            font-size: 14px;
          }
        }
        .news_list_item {
          .news_list_item_content {
            .box_content_news_content_item_content_item {
              height: 90px;
              .news_item_img {
                width: 142px;
              }
              .news_item_info {
                width: calc(100% - 145px);
                padding-bottom: 16px;
                margin-left: 4px;
                .news_item_info_title {
                  font-size: 16px;
                  -webkit-line-clamp: 1;
                }
                .news_item_info_content {
                  font-size: 14px;
                  -webkit-line-clamp: 1;
                }
                .news_item_info_time {
                  font-size: 14px;
                  a {
                    font-size: 14px;
                  }
                }
              }
            }
            .news_list_pagination {
              margin-bottom: 24px;
            }
          }
        }
      }
    }
  }
}
</style>
